import React from "react";
import { Divider, Space, Tag } from "antd";
import "./tu3.scss";
function App() {
  return (
    <div className="box">
      <Space  wrap className="hj">
        <div className="top" style={{ display: "flex" }}>
          <Tag color="#6da7ef" className="awfd awfd1111" id="awfd1111"     style={{ width: "270PX", height: "100px" }}>
            <div className="left">
              <div className="left_left">
                <span>充值总金额:￥ 10000</span>
                <span>充值赠送金额:￥ 10000</span>
              </div>
            </div>
            <div className="right">
              <span>支付宝:￥10000</span>
              <span>微信:￥10000</span>
              <span>其他:￥10000</span>
            </div>
          </Tag>
          <Tag
            color="#6da7ed"
            style={{ width: "270PX", height: "100px" }}
            id="awfd1"
          >
            <div className="left">
              <span>缴费总金额</span>
              <span>￥ 10000</span>
            </div>
            <div className="right">
              <span>支付宝:￥10000</span>

              <span>微信:￥10000</span>

              <span>其他:￥10000</span>
            </div>
          </Tag>
          <Tag
            color="#8c6ded"
            style={{ width: "270PX", height: "100px" }}
            id="awfd1"
          >
            <div className="left">
              <span>月租总金额</span>
              <span>￥10000</span>
            </div>
            <div className="right">
              <span>线下结算</span>
              <span>￥10000</span>
            </div>
          </Tag>
        </div>
        <div className="middle">
          <Tag
            color="#6da7ed"
            style={{ width: "200px", height: "50px" }}
            id="awfd2"
          >
            <div className="left">
              <div className="left_up">
                <span>平台累计总金额</span>
                <span>￥10000</span>
              </div>
              <div className="left_bottom">
                <span>平台剩余金额</span>
                <span>￥10000</span>
              </div>
            </div>
          </Tag>
          <Tag
            color="#fc8675"
            style={{ width: "200px", height: "50px" }}
            id="awfd1"
          >
            <div className="left">
              <span>退款金额</span>
              <span>￥ 10000</span>
            </div>
            <div className="right">
              <span>
                钱包退款:<span>￥10000</span>
              </span>
              <span>
                缴费退款:<span>￥10000</span>
              </span>
            </div>
          </Tag>
          <Tag
            color="#414e62"
            style={{ width: "200px", height: "50px" }}
            id="awfd3"
          >
            <span>优惠券折扣</span>

            <span>￥10000</span>
          </Tag>
        </div>
        <div className="bottom_bottom">
          <Tag
            color="#5abb8f"
            style={{ width: "270PX", height: "50px" }}
            id="awfd2"
          >
            <div className="left">
              <div className="left_up">
                <span>用户代开发票额度</span>
                <span>￥10000</span>
              </div>
              <div className="left_bottom">
                <span>平台可开发票金额</span>
                <span>￥10000</span>
              </div>
            </div>
          </Tag>
          <Tag
            color="#ebc85e"
            style={{ width: "200px", height: "50px" }}
            id="awfd2"
          >
            <div className="left">
              <div className="left_up">
                <span>充值赠送</span>
                <span>￥10000</span>
              </div>
              <div className="left_bottom">
                <span>充值余额</span>
                <span>￥10000</span>
              </div>
            </div>
          </Tag>
          <Tag
            color="#87d068"
            style={{ width: "100px", height: "50px" }}
            id="awfd3"
          >
            <div className="left">
              <span>已开发票</span>
              <span>￥10000</span>
            </div>
          </Tag>
        </div>
      </Space>
    </div>
  );
}

export default App;

//四个格子首页
